//先引入gulp自动化工具
const gulp = require('gulp')
//引入html任务工具包
const htmlmin = require('gulp-htmlmin')
//引入css任务工具包
const cssmin = require('gulp-cssmin')
//引入sass任务工具包
const sass = require( 'gulp-sass' ) ( require ( 'sass' ) )
//引入js任务工具包
const js = require('gulp-uglify')
//引入babel任务工具包
const babel = require('gulp-babel')
//引入del任务工具包
const del = require('del')
//引入服务器任务工具包，因为咱们都使用了gulp工具了，没有必须要在使用其他的软件重新开启服务
const server = require('gulp-webserver')

//配置html任务
const htmlHandler = function(){
    //gulp.src() 表示要那个东西要进行压缩处理
    return gulp.src('./src/**/*.html')
    //具体执行压缩带没带函数
    .pipe(htmlmin({
          removeComments: true,//清除HTML注释
          collapseWhitespace: true,//压缩HTML
          collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
          removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
          //removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
          removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
          minifyJS: true,//压缩页面JS
          minifyCSS: true//压缩页面CSS 
    }))
    //最终压缩完毕放到那个目录
    .pipe(gulp.dest('./dist'))
}
//配置css任务
const cssHandler = function(){
    return gulp.src('./src/sass/*.scss')
    //让css代码压缩之前，应该先把sass转成css代码然后再进行压缩处理
    .pipe(sass())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))
}
//配置js任务
const jsHandler = function(){
    return gulp.src('./src/js/*.js')
    //先把ES6语法转成ES5后，再进行压缩处理
    .pipe(babel({
         presets: ['es2015']
    }))
    .pipe(js())
    .pipe(gulp.dest('./dist/js'))
}
//libs和img任务
const libsHandler = function(){
    return gulp.src('./src/libs/**')
    .pipe(gulp.dest('./dist/libs'))
}
const imgHandler = function(){
    return gulp.src('./src/img/**')
    .pipe(gulp.dest('./dist/img'))
}
//font任务
const fontHandler = function(){
    return gulp.src('./src/font/**')
    .pipe(gulp.dest('./dist/font'))
}
// data任务
const dataHandler = function(){
    return gulp.src('./src/data/**')
    .pipe(gulp.dest('./dist/data'))
}




//清除del任务
const delHandler = function(){
    return del(['./dist'])
}
//服务器任务
const serverHandler = function(){
     return gulp.src('./dist')
        .pipe(server({
            host: 'localhost',          // 配置打开浏览器的域名
            port: 1314,                 // 配置打开浏览器的端口号
            livereload: true,           // 自动刷新浏览器
            open: './index.html'  // 默认打开 dist 文件夹下的哪个文件
        }))
}

// 创建一个 watch 任务
const watchHandler =  function () {
    gulp.watch('./src/sass/**', cssHandler)
    gulp.watch('./src/js/**', jsHandler)
    gulp.watch('./src/**/*.html', htmlHandler)
    gulp.watch('./src/libs/**', libsHandler)
    gulp.watch('./src/img/**', imgHandler)
    gulp.watch('./src/font/**',fontHandler)
    gulp.watch('./src/data/**',dataHandler)
}

//输出任务
// module.exports = {
//     htmlHandler,
//     cssHandler,
//     jsHandler,
//     delHandler
// }


//并行执行任务，一起执行
// module.exports.default = gulp.parallel(cssHandler, jsHandler, htmlHandler)

//串行执行任务，先执行第一个，再执行第二个
module.exports.default = gulp.series(
     delHandler,
     gulp.parallel(cssHandler, jsHandler, htmlHandler, libsHandler, imgHandler,fontHandler,dataHandler),
     serverHandler,
     watchHandler
)